<div id="content">
  <div class="row s_page_title">
    <sa-big-breadcrumbs
      [items]="['项目管理', '项目费用统计']"
      icon="fa fa-smile-o"
      class="col-xs-12 col-sm-7 col-md-7 col-lg-4"
    ></sa-big-breadcrumbs>
  </div>
  <sa-widgets-grid>
    <div class="s_table">
      <div sa-widget [editbutton]="false" color="darken" class="clearfix">
        <header>
          <span class="widget-icon"><i class="fa fa-table"></i></span>
          <h2>项目费用统计</h2>
        </header>
        <div>
          <div class="widget-body no-padding">
            <div class="page-header clearfix s_table_opreation">
              <div class="left page-header-btn" style="width: calc(100% - 230px)">
                <div class="top_module cancle">
                  <span class="module_text">填报人</span>
                  <input
                    type="text"
                    class="module_inp top_module_select"
                    [(ngModel)]="tableParam.createUserName"
                    placeholder="填报人姓名"
                  />
                  <div class="s_del_icon" (click)="delKey()">x</div>
                </div>
                <div class="top_module">
                  <span class="module_text">项目名称</span>
                  <sa-company-tree
                    companyTreeId="companyTree"
                    (companySelected)="companySelected($event)"
                  ></sa-company-tree>
                </div>
                <div class="top_module">
                  <span class="module_text">排序条件</span>
                  <select name="" id="" class="module_inp" [(ngModel)]="tableParam.dateSortType">
                    <!--<option value="">默认</option>-->
                    <option value="0">降序</option>
                    <option value="1">升序</option>
                  </select>
                </div>
                <div class="selectDate top_module">
                  <table-select-date [notInit]="true" (outerTime)="getSelectTableTime($event)" [minDay]="true"></table-select-date>
                </div>
                <button class="btn btn-primary" (click)="tableSearch()">查询</button>
                <button type="button" class="btn btn-primary" (click)="exportData()">导出</button>
              </div>
              <!-- <div class="right top-search">
								<input type="text" [(ngModel)]="tableParam.searchKey" (change)="tableSearch()"
									class="search-input" placeholder="车牌号/手机号码">
								<span class="top-search-box">
									<button class="top-search-btn" type="button" (click)="tableSearch()"> <i
											class="fa fa-search"></i></button>
								</span>
							</div> -->
            </div>
            <div class="table_scroll">
              <table
                class="
                  display
                  dataTables
                  responsive
                  table table-striped table-bordered table-hover
                  dataTable
                  s_h5_table
                "
              >
                <thead>
                  <tr>
                    <th>填报人</th>
                    <th>出差地点</th>
                    <th>项目名称</th>
                    <th>出差补贴</th>
                    <th>机票费</th>
                    <th>火车费</th>
                    <th>大巴费</th>
                    <th>打车费</th>
                    <th>公交费</th>
                    <th>加油费</th>
                    <th>住宿费</th>
                    <th>合住人员</th>
                    <th>氩气费</th>
                    <th>17-4焊机</th>
                    <th>工具费</th>
                    <th>租赁费（叉车租用等）</th>
                    <th>临工费</th>
                    <th>快递费</th>
                    <th>其他费用</th>
                    <th>小计</th>
                    <th>
                      日期
                      <span class="sort-icon">
                        <i
                          class="fa fa-caret-left"
                          [ngClass]="{ active: tableParam.dateSortType == '1' }"
                          (click)="columnSort(1)"
                        ></i>
                        <i
                          class="fa fa-caret-right"
                          [ngClass]="{ active: tableParam.dateSortType == '0' }"
                          (click)="columnSort(0)"
                        ></i>
                      </span>
                    </th>
                    <th>备注</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr *ngFor="let row of tableData">
                    <td>{{ row.createUserName }}</td>
                    <td>{{ row.address }}</td>
                    <td>{{ row.projectName }}</td>
                    <td>{{ row.travelAllowance }}</td>
                    <td>{{ row.airFee }}</td>
                    <td>{{ row.trainTicketFee }}</td>
                    <td>{{ row.busFee }}</td>
                    <td>{{ row.taxiFee }}</td>
                    <td>{{ row.transitFee }}</td>
                    <td>{{ row.refuelingFee }}</td>
                    <td>{{ row.hotelFee }}</td>
                    <td>{{ row.sharePeople }}</td>
                    <td>{{ row.argonFee }}</td>
                    <td>{{ row.weldingMachine }}</td>
                    <td>{{ row.toolFee }}</td>
                    <td>{{ row.rentalFee }}</td>
                    <td>{{ row.temporaryWorkFee }}</td>
                    <td>{{ row.expressFee }}</td>
                    <td>{{ row.otherFee }}</td>
                    <td>{{ row.subtotal }}</td>
                    <td>{{ row.dataValue }}</td>
                    <td>{{ row.remark }}</td>
                    <td>
                      <button type="button" (click)="deleteRow(row)">删除</button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="table-fix clearfix">
              <paginator
                [totalRecords]="totalCount"
                [rows]="pageSize"
                [currentPage]="curPage - 1"
                (onPageChange)="paginate($event)"
              ></paginator>
              <button type="button" class="btn default refresh_btn" (click)="refresh()">
                <i class="fa fa-refresh"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 查看异常记录 -->
    <div
      bsModal
      #problemModal="bs-modal"
      id="problemModal"
      class="modal fade"
      tabindex="-1"
      role="dialog"
      aria-labelledby="myLargeModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog modal-lg" style="width: 800px">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" (click)="cancelProblemModal(problemModal)" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title">查看异常记录</h4>
          </div>
          <div class="modal-body" style="padding: 15px 15px 50px 15px">
            <div class="form-group col-xs-12">
              <label class="col-xs-3 control-label">异常检测详细内容：</label>
              <div class="col-xs-9">
                {{ ProblemModalTableData }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 查看异常记录 end-->
  </sa-widgets-grid>
</div>
<style>
  .cancle {
    position: relative;
  }

  .cancle:hover > .s_del_icon {
    display: inline-block;
  }
  /* 排序的样式 */
  .table_scroll th {
    position: relative;
  }
  .sort-icon {
    position: absolute;
    right: 18px;
    top: 5px;
  }
  .sort-icon .fa {
    padding: 5px;
    position: absolute;
    top: -4px;
    font-size: 16px;
    cursor: pointer;
    color: #aaa;
    transform: rotate(90deg);
  }
  .sort-icon .fa.active {
    color: #196ddd;
  }
  .sort-icon .fa-caret-right {
    top: 6px;
  }
</style>
